import React, {Component} from 'react';
import {
  View,
  Image,
  TouchableOpacity,
  Text,
  ScrollView,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import Constants from '../../common/Constants';
import BasePage from '../common/BasePage';
import Config from '../../config';
import HeartLoveItemListView from './HeartLoveItemListView';


const PAGE_DATAS = [{btnName:"最佳人气", type:"hot", index:0}, {btnName:"单位推荐", type:"", index:1}];

export default class HeartLoveHeAndShePage extends BasePage  {
  constructor(props) {
    super(props);

    this._pageWidth = SizeUtils.getWindowSize().width;
    this._pageHeight = SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(100);
    this.state.currentIndex = 0;
    this._clickTopBtnTimer = null;
  }

  render() {
    return(
      <View style={{paddingTop:Config.paddingTop, backgroundColor:"#00000000"}}>
        {this._renderNavigationBar()}
        {this._renderTopButton()}
        {this._renderScrollView()}
      </View>
    )
  }

  _renderScrollView() {
    return(
      <ScrollView style={{width:this._pageWidth,
          height:this._pageHeight}}
        ref={(ref) => this._scrollView = ref}
        horizontal={true}   // 水平方向
        showsHorizontalScrollIndicator={false}  // 水平指示器
        showsVerticalScrollIndicator={false}    // 垂直指示器
        pagingEnabled={true}    // 开启分页功能
        alwaysBounceHorizontal={false} //弹性拉动一截
        onScroll={this._onScroll.bind(this)}
      >
          {this._getPage(0)}
          {this._getPage(1)}
      </ScrollView>
    )
  }

  _onScroll(event) {
    if(this._clickTopBtnTimer) {
      return;
    }
    let x = event.nativeEvent.contentOffset.x;
    let index = Math.round(x / this._pageWidth);
    console.log("round", index, x / this._pageWidth, x, this._pageWidth);
    if(this.state.currentIndex != index) {
      this.setState({
        currentIndex:index,
      })
    }
  }

  _changeTab(index) {
    this.setState({
      currentIndex:index,
    });
  }

  _getPage(index) {
    return(
      <HeartLoveItemListView  myLoveData={this.props.pageData.routeData.myLoveData}
          type={PAGE_DATAS[index].type} style={{paddingTop:SizeUtils.translateDesignHeightToCode(0),
        width:this._pageWidth,
        height:this._pageHeight}} />
    )
  }

  _renderTopButton() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.translateDesignHeightToCode(80),
          flexDirection:"row", justifyContent:"center", alignItems:"center", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          borderColor:"#eeeeee", backgroundColor:"#ffffff"}}>
        {this._getButton(0)}
        {this._getButton(1)}
      </View>
    )
  }

  _getButton(index) {
    return(
      <TouchableOpacity onPress={()=>this._onPressBtn(index)} style={{width:SizeUtils.translateDesignWidthToCode(162),
          height:SizeUtils.translateDesignHeightToCode(80), flexDirection:"column", justifyContent:"center", alignItems:"center",
          }}>
        {/* <Image source={IMAGES[index]} style={{width:SizeUtils.translateDesignWidthToCode(58), height:SizeUtils.translateDesignWidthToCode(58)}} /> */}
        <View style={{height:SizeUtils.translateDesignHeightToCode(76), justifyContent:"center", alignItems:"center",}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), color:index == this.state.currentIndex ? "#db3132": "#666666"}}>
            {PAGE_DATAS[index].btnName}
          </Text>
        </View>
        <View style={{borderColor:"#db3132", borderBottomWidth:index == this.state.currentIndex ? SizeUtils.translateDesignNumToCode(5) : 0,
          width:SizeUtils.translateDesignWidthToCode(60), height:SizeUtils.translateDesignHeightToCode(5)}}>
        </View>
      </TouchableOpacity>
    )
  }

  _onPressBtn(index) {
    if(this._clickTopBtnTimer) {
      return;
    }
    this._clickTopBtnTimer = setTimeout(() => {
      this._clearClickTopBtnTimer();
    }, 300);
    this._scrollView.scrollTo({x:index * this._pageWidth});
  }

  _clearClickTopBtnTimer() {
    this._clickTopBtnTimer && clearTimeout(this._clickTopBtnTimer)
    this._clickTopBtnTimer = null;
  }
};
